<template>
  <el-card shadow="hover">
    <div class="numbet-card">
      <svg-icon :icon-class="icon" />
      <div class="card-text">
        <div class="top-number">
          <CountTo :end-val="number" :delay="500" />
        </div>
        <div class="top-title">{{ title }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  props: {
    icon: {
      type: String,
      default: 'logo'
    },
    number: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.numbet-card {
  display: flex;
  justify-content: center;
  align-items: center;
  $contentHeight: 60px;
  .svg-icon {
    font-size: $contentHeight;
  }
  .card-text {
    padding: 0 10px;
    .top-number {
      $ht: 42px;
      height: $ht;
      font-size: 30px;
      font-weight: 600;
      color: #304256;
      line-height: $ht;
    }
    .top-title {
      $ht: 22px;
      height: $ht;
      font-size: 16px;
      color: #b6b6b6;
      line-height: $ht;
    }
  }
}
</style>
